<!DOCTYPE html>
<html lang="es">
  <head>   
    <meta charset="utf-8">
    <meta content="App Inventor para Android" name="description">
    <meta content="Android, Blocks App Inventor, Mobile, Phone, IDE" name="keywords">
    <title>
      Broadcaster Hub - App Inventor para Android
    </title>
    <link href="../../../static/images/appinventor-16.png" rel="SHORTCUT ICON" type="image/ico">
    <link href="../../../static/images/appinventor-16.png" rel="icon" type="image/png">
    <link href="../../../static/css/appinventor.css" rel="stylesheet" type="text/css">    
        <!-- ADD Google Analytics here -->
        <!-- END Google Analytics here -->
        <style type="text/css">
img.c4 {border-width:0}
    td.c3 {width: 180px; height: 24px;}
    td.c2 {font-weight: bold}
    div.c1 {clear:both;}
    </style>
  </head>
  <body>
    <div id="aiac">
      <div class="main-container">
        <div class="header">
          <div class="header-title">
            <a href="../../../about/index.html"><img alt="" src="../../../static/images/appinventor_logo.gif"></a>
          </div>
            <div class="header-search">
                        <!-- ADD Google Custom Search -->
                        <!-- END Google Custom Search -->
              <div class="header-search-query">
              </div>
              <div class="header-search-button">
              </div>
            </div>
          <div class="header-login">
            <div class="header-login-greeting">
              Aprende acerca de App Inventor
            </div>
          </div>
        </div>
        <div class="customhr customhr-green"></div>
                <!-- ADD Google Search Results -->
<div id="cse" style="width:100%;height:0;"></div>
<!-- END Google Search Results -->
        <div id="navigation">
          <div id="navigation-links">
            <div class="navigation-link-option" id="navigation-link-home">
              <a href="../../../about/index.html">Acerca de</a>
            </div>
            <div class="navigation-link-option navigation-link-active" id="navigation-link-learn">
              <a href="../../../learn/index.html">Aprende</a>
            </div>
            <div class="navigation-link-option" id="navigation-link-forum">
              <a href="../../../forum/index.html">Foro</a>
            </div>
            <div class="navigation-link-option" id="navigation-link-myappinventor">
              <a href="">Mis Proyectos</a><div>(próximamente)</div>
            </div>
          </div>
          <div id="navigation-breadcrumb">
            <a href="../../../learn/index.html">Aprende</a> &gt; <a href="../../../learn/tutorials/index.html">Tutoriales</a> &gt; Broadcaster Hub &gt;
          </div>
          <div class="c1"></div>
        </div>
        <div class="customhr customhr-gray"></div>
        <div class="content">
          <div class="content-body">
            <div class="learn-page">
              <h1>                
                Broadcast Hub              
              </h1>
              <p>
                En este tutorial, vas a escribir una aplicación que responde automáticamente a los mensajes de texto y a los mensajes de texto de difusión que  recibe a una lista de números de teléfono. La aplicación está inspirada en <a href="http://www.frontlinesms.com/">FrontLineSMS</a>, una herramienta que ha sido usada en países en desarrollo para <a href="http://news.bbc.co.uk/2/hi/technology/8209172.stm">monitorizar elecciones</a>, difundir cambios del clima, y en general para conectar gente que no tiene acceso a la web pero tienen teléfonos y conectividad movil..<br>
              </p>
              <p>
                FrontllineSMS es un software que se ejecuta en una computadora con un teléfono conectado a ella. La computadora y el teléfono conectado sirven como un centro de comunicación para los SMS de texto para un grupo. Crearás una versión del software que se ejecuta en un teléfono Android, permitiendo así que el centro de comunicaciones sea tan movil como los teléfonos que conecta
              </p>
              <p>
                Para realizar este tutorial se supone que ya estas familiarizado con los conceptos básicos de App Inventor -- el uso del Diseñador de componentes para construir una interfaz de usuario, y el uso del Editor de bloques para especificar controladores de evento. Si no estas familiarizado con estos conceptos básicos, prueba a realizar algunos de los <a href="../../../learn/tutorials/index.html">tutoriales básicos</a> antes de continuar.
              </p>
              <p>
                Para este tutorial también se supone que has completado el tutorial <a href="../../../learn/tutorials/textgroup/textgroup.html">TextGroup</a> y estás ademas familiarizado con los conceptos básicos del componente <span class="ButtonText">Texting</span>.
              </p>
              <h2>
                Primeros pasos
              </h2>
              <p>
                Conéctate al sitio web de App Inventor  y comienza un nuevo proyecto. Nómbralo  BroadcastHub, y ajusta también el <span class="ButtonText">Title</span> (título) de la pantalla a BroadcastHub. Abre el editor de bloques y conéctalo al teléfono.
              </p>
              <h2>
                Introducción
              </h2>
              <p>
                BroadcastHub procesa los mensajes de texto que recibe del siguiente modo:<br>
              </p>
              <ul>
                <li>Si el mensaje procede de una fuente desconocida, la aplicación responde con un mensaje a esa fuente invitándola a unirse a la lista de difusión. 
                </li>
                <li>Si se recibe el mensaje "joinabc", la aplicación añade al remitente a la lista de difusión.<br>
                </li>
                <li>Si el mensaje procede de un número que ya está en la lista de difusión, el mensaje es enviado a todos los números de la lista.
                </li>
              </ul>
              <p>
                Este tutorial muestra los siguientes conceptos de App Inventor:<br>
              </p>
              <ul>
                <li>El componente <span class="ButtonText">Texting</span> para enviar textos y procesar los textos recibidos.
                </li>
                <li>Variables de lista para mantener un seguimiento de los números al los que enviar textos.<br>
                </li>
                <li>El bloque <span class="ButtonText">foreach</span> que permite a una aplicación repetir operaciones en una lista de datos (la lista de números de teléfono)<br>
                </li>
              </ul>
              <h2>
                Preparando los componentes 
              </h2>
              <p>
                BroadcasterHub facilita la comunicación entre teléfonos móviles (celulares). Estos teléfonos no necesitan tener la aplicación BroadcasterHub instalada, ni siquiera ser  smart-phones. La aplicación es el centro de comunicación, y la interfaz de usuario es solo para al administrador de la red de comunicación.
              </p>
              <p>
                Para este ejemplo, la interfaz de usuario es simple: solo muestra la  <em>broadcast list</em> (lista de difusión) actual -- la lista de números de teléfono que están registrados para el servicio -- e informará de los textos que reciba y difunda.
              </p>
              <p>
                Para construir la interfaz, añade los siguientes componentes:
              </p>
              <div class="advtutorial">
                <table>
                  <tbody>
                    <tr>
                      <td class="tbl-header">
                        Tipo de componente
                      </td>
                      <td class="tbl-header">
                        Grupo de la paleta
                      </td>
                      <td class="tbl-header">
                        Como lo llamarás
                      </td>
                      <td class="tbl-header">
                        Propósito del componente
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">Label</span>
                      </td>
                      <td>                        
                        Basic                      
                      </td>
                      <td>
                        <span class="ButtonText">BroadcsastListLabel</span>
                      </td>
                      <td>
                        Esta mostrará los números de teléfono que están registrados<br>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">Label</span>
                      </td>
                      <td>                        
                        Basic<br>
                      </td>
                      <td>
                        <span class="ButtonText">LogLabel</span>
                      </td>
                      <td>
                        Esta mostrará un registro de los mensajes recibidos y enviados
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">Texting</span>
                      </td>
                      <td>                        
                        Social<br>
                      </td>
                      <td>
                        <span class="ButtonText">Texting1</span>
                      </td>
                      <td>
                        El componente que procesará los textos
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">TinyDB</span>
                      </td>
                      <td>                        
                        Basic                      
                      </td>
                      <td>
                        <span class="ButtonText">TinyDB1</span>
                      </td>
                      <td>
                        Para almacenar la lista de números de teléfono registrados
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <ul>
                <li>Ajusta la propiedad <span class="ButtonText">Width</span> (el ancho) de cada una de las etiqueta a <span class="ButtonText">Fill Parent</span> para que abarquen el teléfono horizontalmente. Ajusta la propiedad <span class="ButtonText">Height</span> (la altura) de las etiquetas a 200 píxeles.
                </li>
                <li>Ajusta la propiedad <span class="ButtonText">Text</span> de <span class="ButtonText">BroadcastListLabe</span> a "Broadcast List...".
                </li>
                <li>Ajusta la propiedad <span class="ButtonText">Text</span> de <span class="ButtonText">LogLabel</span> y déjala en blanco.
                </li>
              </ul>
              <p>
                BroadcastHub debe tener este aspecto después de que su pantalla principal esté diseñada:
              </p>
              <div class="imagecontainer">
                <img alt="" src="BroadcasterHubAssets/broadcasterDesigner.png" width="949">
              </div>
              <h2>
                Añade comportamientos a los componentes
              </h2>
              <p>
                La actividad de BroadcastHub no es iniciada por el usuario al introducir información o pulsando un botón, sino por los textos que son recibidos de fuentes externas. Necesitarás los siguientes comportamientos:
              </p>
              <ul>
                <li>Cuando el mensaje proceda de una fuente desconocida, la aplicación responda con un mensaje de texto a esa fuente invitándola a unirse a la lista de difusión. 
                </li>
                <li>Cuando se reciba el mensaje de texto "joinabc", la aplicación registre al remitente como parte de la lista de difusión.<br>
                </li>
                <li>Cuando el mensaje proceda de un número que ya esté en la lista de difusión, el mensaje sea enviado a todos los números de la lista.
                </li>
              </ul>
              <p>
                Comienza creando el primer comportamiento -- cuando recibas un mensaje de texto, envía un mensaje de vuelta al remitente invitándolo con un código de texto, "joinabc", para que se registre en el grupo. Necesitarás los siguientes bloques:
              </p>
              <div class="advtutorial">
                <table>
                  <tbody>
                    <tr>
                      <td class="tbl-header">
                        Tipo de bloque
                      </td>
                      <td class="tbl-header">
                        Cajón
                      </td>
                      <td class="tbl-header">
                        Propósito
                      </td>
                    </tr>
                    <tr>
                      <td>                        
                        <span class="ButtonText">Texting1.MessageReceived</span>
                      </td>
                      <td>                        
                        Texting1<br>
                      </td>
                      <td>
                        Controlador de evento activado cuando el teléfono recibe un mensaje
                      </td>
                    </tr>
                    <tr>
                      <td>                        
                        <span class="ButtonText">set Texting1.PhoneNumber to</span>
                      </td>
                      <td>                        
                        Texting1                      
                      </td>
                      <td>
                        Para establecer el número de teléfono para el texto de vuelta
                      </td>
                    </tr>
                    <tr>
                      <td>                        
                        <span class="ButtonText">value number</span>
                      </td>
                      <td>                        
                        My Definitions                      
                      </td>
                      <td>
                        Argumento de MessageReceived, (mensaje recibido), es el número de teléfono del remitente<br>
                      </td>
                    </tr>
                    <tr>
                      <td>                        
                        <span class="ButtonText">set Texting1.Message</span>
                      </td>
                      <td>                        
                        Texting1                      
                      </td>
                      <td>
                        Para establecer el mensaje de invitación que enviar 
                      </td>
                    </tr>
                    <tr>
                      <td>                        
                        <span class="ButtonText">text</span>
                      </td>
                      <td>                        
                        Text                      
                      </td>
                      <td>
                        El mensaje de invitación
                      </td>
                    </tr>
                    <tr>
                      <td>                        
                        <span class="ButtonText">Texting1.SendMessage</span>
                      </td>
                      <td>                        
                        Texting1                      
                      </td>
                      <td>
                        ¡Envialo!
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <p>
                Los bloques deben verse así:
              </p>
              <div class="imagecontainer">
                <img alt="" height="206" src="BroadcasterHubAssets/messageRcvd1.png" width="639"><br>
              </div>
              <h2>
                Como trabajan los bloques
              </h2>
              <p>
                <span class="ButtonText">Texting1.MessageReceived</span> es activado cuando se recibe cualquier mensaje de texto en el teléfono. Los bloques dentro del conjunto controlador de eventos ajustan <span class="ButtonText">PhoneNumber</span> (el número de teléfono) y <span class="ButtonText">Message</span> ( el mensaje) del componente <span class="ButtonText">Texting1</span> , entonces envía el mensaje
              </p>
              <blockquote class="testing">
                <strong>Prueba el comportamiento.</strong> Necesitaras otro teléfono ademas del que tiene la aplicación instalada. Desde el segundo teléfono, envía un texto "hola" al teléfono que ejecuta la aplicación. El segundo teléfono debe recibir un mensaje invitándolo al grupo. 
              </blockquote>
              <h2>
                Manejando el mensaje de texto "joinabc"
              </h2>
              <p>
                Crea los bloques para el segundo comportamiento: "cuando se recibe el mensaje de texto "joinabc", añade al remitente a la lista de difusión". Primero necesitas definir una variable de lista, <span class="ButtonText">BroadcastList</span>, para almacenar los números de teléfono que se registren. Desde el cajón <span class="ButtonText">Definitions</span>, arrastra un bloque def variable y nómbralo "BroadcastList". Inicializalo con un bloque <span class="ButtonText">make a list</span> desde <span class="ButtonText">Lists</span>:
              </p>
              <div class="imagecontainer">
                <img alt="" height="59" src="BroadcasterHubAssets/BroadcastList.png" width="318">
              </div>
              <p>
                A continuación, modifica el controlador de evento <span class="ButtonText">Texting1.MessageReceived</span> de modo que si se recibe el mensaje "joinabc" añada el número de teléfono de remitente a <span class="ButtonText">BroadcastList</span>. Después de añadir el número a la lista, muestra la nueva lista en <span class="ButtonText">BroadcastListLabel</span>. Necesitarás los siguientes bloques:
              </p>
              <div class="advtutorial">
                <table>
                  <tbody>
                    <tr>
                      <td>
                        <b> Tipo de bloque</b><br>
                      </td>
                      <td>
                        <b>Cajón</b><br>
                      </td>
                      <td class="c2">
                        Propósito
                      </td>
                    </tr>
                    <tr>
                      <td class="c3" nowrap>
                        <span class="ButtonText">ifelse</span><br>
                      </td>
                      <td>                        
                        Control<br>
                      </td>
                      <td>
                        Dependiendo del mensaje recibido, hará diferentes cosas<br>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        Bloque <span class="ButtonText">=</span>
                      </td>
                      <td>                        
                        Math                      
                      </td>
                      <td>
                        La comprobación debe ser: si messageText (el mensaje de texto es igual a "joinabc"
                      </td>
                    </tr>
                    <tr>
                      <td>                        
                        <span class="ButtonText">value messageText</span>
                      </td>
                      <td>                        
                        My Definitions                      
                      </td>
                      <td>
                        Para colocar en el bloque =
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">text</span> ("joinabc")                      
                      </td>
                      <td>                        
                        Text                      
                      </td>
                      <td>
                        Para colocar en el bloque =<br>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">add items to list</span>
                      </td>
                      <td>                        
                        Lists                      
                      </td>
                      <td>
                        Para añadir el número del remitente a <span class="ButtonText">BroadcastList</span>
                      </td>
                    </tr>
                    <tr>
                      <td>                        
                        <span class="ButtonText">BroadcastList</span>
                      </td>
                      <td>                        
                        My Definitions                      
                      </td>
                      <td>
                        La lista
                      </td>
                    </tr>
                    <tr>
                      <td>                        
                        <span class="ButtonText">value number</span>
                      </td>
                      <td>                        
                        My Definitions                      
                      </td>
                      <td>
                        Colócalo como elemento de <span class="ButtonText">add items to list</span>
                      </td>
                    </tr>
                    <tr>
                      <td>                        
                        <span class="ButtonText">set BroadcastListLabel.Text to</span>
                      </td>
                      <td>                        
                        BroadcastListLabel                      
                      </td>
                      <td>
                        Muestra la nueva lista
                      </td>
                    </tr>
                    <tr>
                      <td>                        
                        <span class="ButtonText">BroadcastList</span>
                      </td>
                      <td>                        
                        My Definitions                      
                      </td>
                      <td>
                        Colócalo en el bloque <span class="ButtonText">set BroadcastListLabel.Text to</span>
                      </td>
                    </tr>
                    <tr>
                      <td>                        
                        <span class="ButtonText">set Texting1.Message to</span>
                      </td>
                      <td>                        
                        Texting                      
                      </td>
                      <td>
                        Prepara <span class="ButtonText">Texting1</span> para enviar el mensaje de vuelta al remitente
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">text</span> ("congrats, you ...")                      
                      </td>
                      <td>                        
                        Text                      
                      </td>
                      <td>
                        Felicita al remitente por unirse al grupo
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <p>
                Los bloques deben verse así:
              </p>
              <div class="imagecontainer">
                <img alt="" height="443" src="BroadcasterHubAssets/addtolist.png" width="691">
              </div>
              <h2>
                Como trabajan los bloques
              </h2>
              <p>
                La primera fila de bloque ajusta <span class="ButtonText">Texting1.PhoneNumber</span> al número de teléfono del cual se acaba de recibir el mensaje. La aplicación entonces pregunta si <span class="ButtonText">messageText</span> (el mensaje recibido es el código especial "joinabc". Si es así, el número de teléfono remitente se añade a <span class="ButtonText">BroadcastList,</span> y se envía un mensaje de felicitación. Si <span class="ButtonText">messageText</span>  es algo distinto a "joinabc", el mensaje de respuesta es solo el mensaje de invitación anterior. Después del bloque ifelse, se envía el mensaje (fila de abajo).
              </p>
              <blockquote class="testing">
                <strong>Prueba este comportamiento.</strong> Desde un segundo teléfono, envía el mensaje de texto "joinabc" al teléfono en el que se está ejecutando. ¿Recibes la respuesta correcta? Prueba a enviar un mensaje de texto para probar si el bloque ifelse está trabajando correctamente.
              </blockquote>
              <h2>
                Difusión de mensajes
              </h2>
              <p>
                A continuación, añadirás el comportamiento para que la aplicación difunda los mensajes a los números de <span class="ButtonText">BroadcastList</span>, si el mensaje proviene de un numero que esté en <span class="ButtonText">BroadcastList</span>. Necesitarás un bloque <span class="ButtonText">ifelse</span> adicional para comprobar si el número ya está en la lista, y un bloque <span class="ButtonText">foreach</span> para enviar el mensaje a cada elemento de la lista. Aquí están todos los bloques que necesitas:
              </p>
              <div class="advtutorial">
                <table>
                  <tbody>
                    <tr>
                      <td class="tbl-header">
                        Tipo de bloque
                      </td>
                      <td class="tbl-header">
                        Cajón
                      </td>
                      <td class="tbl-header">
                        Propósito
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">ifelse</span>
                      </td>
                      <td>                        
                        Control                      
                      </td>
                      <td>
                        Dependiendo de si el remitente está ya en la lista o no, hará cosas diferentes<br>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">is in list?</span>
                      </td>
                      <td>                        
                        Lists                      
                      </td>
                      <td>
                        Comprueba si algo está en una lista
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">global BroadcastList</span>
                      </td>
                      <td>                        
                        My Definitions                      
                      </td>
                      <td>
                        Colócalo en la ranura list de <span class="ButtonText">is in list?</span>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">value number</span>
                      </td>
                      <td>                        
                        My Definitions                      
                      </td>
                      <td>
                        Colócalo en la ranura thing de <span class="ButtonText">is in list?</span>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">foreach</span>
                      </td>
                      <td>                        
                        Control                      
                      </td>
                      <td>
                        Para repetir el envío del mensaje a todos los elementos de la lista
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">global BroadcastList</span>
                      </td>
                      <td>                        
                        My Definitions                      
                      </td>
                      <td>
                        Colócalo en la ranura list de <span class="ButtonText">foreach</span>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">set Texting1.Message to</span>
                      </td>
                      <td>                        
                        Texting1                      
                      </td>
                      <td>
                        Para definir el mensaje
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">value messageText</span>
                      </td>
                      <td>                        
                        My Definitions                      
                      </td>
                      <td>
                        El mensaje que fue recibido y será difundido
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">set Texting1.Number to</span>
                      </td>
                      <td>                        
                        Texting1                      
                      </td>
                      <td>
                        Para definir el número de teléfono
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">value var</span>
                      </td>
                      <td>                        
                        My Definitions                      
                      </td>
                      <td>
                        Mantiene el elemento actual de <span class="ButtonText">BroadcastList</span>, es un número de teléfono
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <p>
                Los bloques deben verse así:
              </p>
              <div class="imagecontainer">
                <img alt="" height="717" src="BroadcasterHubAssets/broadcastitNolog.png" width="747">
              </div>
              <h2>
                Como trabajan los bloques
              </h2>
              <p>
                El comportamiento es lo suficientemente complejo como para requerir un bloque <span class="ButtonText">ifelse</span> "anidado". Si el número de teléfono del mensaje recibido ya está en la lista, el bloque <span class="ButtonText">foreach</span> se ejecuta y el mensaje se transmite a todos los de la lista. Si el número no está en la lista,se ejecuta la clausula else-do, y se hace otra pregunta, la cual es la comprobación del bloque ifelse anidado: es el <span class="ButtonText">messageText</span> igual a "joinabc". La aplicación toma entonces uno de los dos caminos, basándose en la respuesta.
              </p>
              <p>
                En general, los bloques <span class="ButtonText">if</span> y <span class="ButtonText">ifelse</span> se pueden anidar hasta niveles arbitrarios, dándote la posibilidad de programar comportamientos arbitrariamente complejos.
              </p>
              <blockquote class="testing">
                <strong>Prueba este comportamiento</strong>. Primero, registra dos teléfonos distintos enviando el texto "joinabc" al teléfono que está ejecutando la aplicación. Después envía otro mensaje desde uno de los teléfonos. Ambos teléfonos deben recibir el mensaje.
              </blockquote>
              <h2>
                Registro de los textos difundidos
              </h2>
              <p>
                Cuando se recibe un texto y es enviado al resto de teléfonos, la aplicación debe registrarlo dentro de la propia aplicación para que el administrador pueda monitorizar la actividad. Anteriormente, has añadido la etiqueta <span class="ButtonText">LogLabel</span> a la interfaz de usuario para este propósito. Ahora, prepararás algunos bloque para que cambien <span class="ButtonText">LogLabel</span> cada vez que un texto sea recibido.<br>
                                <br>
                                Necesitas crear un texto que diga algo como "message from 111-2222 broadcast" ("mensaje desde 111-2222 difundido"). El 111-2222 no es un dato fijado, pero es el valor de la variable número que llega con el evento MessageReceived (mensaje recibido). Por lo que para construir el texto, encadenaras la primera parte "message from" con la variable número y finalmente con la última parte del mensaje, el texto "broadcast".<br>
                                <br> 
                                Hay dos funciones en el cajón <span class="ButtonText">Text</span> para construir textos. Una es la función join (unir), la cual une dos piezas de texto. Otra función, <span class="ButtonText">make text</span>, también está disponible y es mas conveniente usarla en lugar de join cuando tienes que unir mas de dos piezas. La usarás para este comportamiento. Aquí están todos los bloques que necesitas:
              </p>
              <div class="advtutorial">
                <table>
                  <tbody>
                    <tr>
                      <td class="tbl-header">
                        Tipo de bloque
                      </td>
                      <td class="tbl-header">
                        Cajón
                      </td>
                      <td class="tbl-header">
                        Propósito
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">set LogLabel.Text to</span>
                      </td>
                      <td>                        
                        LogLabel                      
                      </td>
                      <td>
                        Muestra el registro aquí
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">make text</span>
                      </td>
                      <td>                        
                        Text                      
                      </td>
                      <td>
                        Crea una salida de objeto de texto de varias piezas
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">text</span> ("message from")                      
                      </td>
                      <td>                        
                        Text                      
                      </td>
                      <td>
                        informa del mensaje
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">value number</span>
                      </td>
                      <td>                        
                        My Definitions                      
                      </td>
                      <td>
                        El número del remitente
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">text</span> ("broadcast\n")                      
                      </td>
                      <td>                        
                        Text                      
                      </td>
                      <td>
                        el texto es "message from 111-2222 broadcast" con nuevo contenido
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">LogLabel.Text</span>
                      </td>
                      <td>                        
                        LogLabel                      
                      </td>
                      <td>
                        Añade el nuevo registro a los anteriores
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <p>
                Los bloques deben verse así:
              </p>
              <div class="imagecontainer">
                <img alt="" height="870" src="BroadcasterHubAssets/broadcastit.png" width="747">
              </div>
              <h2>
                Como trabajan los bloques
              </h2>
              <p>
                Después de difundir el mensaje a todos los números de <span class="ButtonText">BroadcastList</span>, la aplicación modifica <span class="ButtonText">LogLabel</span> para incluir un informe del mensaje recién difundido. Si el número del remitente (value number) es "1112222", entonces <span class="ButtonText">make text</span> construye el objeto de texto:
              </p>
              <blockquote>
                message from: 1112222 broadcast (mensaje desde 1112222 difundido)
              </blockquote>
              <p>
                junto con los informes de registro que ya existen en <span class="ButtonText">LogLabel.Text</span> de los mensajes recibidos previamente. El "\n" es el carácter de linea nueva que causa que el informe anterior se muestre en la siguiente linea, por ejemplo,
              </p>
              <blockquote>                
                message from: 1112222 broadcast<br>
                message from: 555-6666 broadcast              
              </blockquote>
              <h2>
                Almacenando BroadcastList (la lista de difusión) en una Base de datos
              </h2>Tal como está, la aplicación funciona, pero cada vez que cierras la aplicación <span class="ButtonText">BroadcastList</span> (la lista de difusión) se pierde y todos tienen que volver a registrarse. Para evitar esto, usaras el componente <span class="ButtonText">TinyDB</span> para almacenar y recuperar <span class="ButtonText">BroadcastList</span> a y desde la base de datos. <span class="ButtonText">TinyDB</span> te permite almacenar datos de forma persistente -- incluso si se cierra la aplicación, la próxima vez que inicies la aplicación los datos estarán ahí. <br>
                          <br>
                          El esquema general para almacenar datos de forma persistente es el siguiente: Cuando la aplicación se inicia, carga la lista desde la base de datos en una variable (por ejemplo en, <span class="ButtonText">BroadcastList</span>). Entonces, cada vez que un nuevo elemento se añade a la lista, se actualiza la versión de la lista en la base de datos. <br>
                          <br>
                          Comienza codificando los bloques para almacenar la lista en la base de datos. Con el componente <span class="ButtonText">TinyDB</span>, una tag (etiqueta) es usada para identificar los datos y distinguirlos de otros datos almacenados en la base de datos. En este caso, puedes etiquetar los datos como "broadcastList". Haz lo siguiente:<br>
              <ol>
                <li>Arrastra un bloque <span class="ButtonText">TinyDB1.StoreValue</span> desde el cajón <span class="ButtonText">TinyDB1</span>.
                </li>
                <li>Crea un bloque <span class="ButtonText">text</span> y colócale el texto "broadcastList". Coloca este bloque <span class="ButtonText">text</span> como tag (etiqueta) de <span class="ButtonText">StoreValue</span>.
                </li>
                <li>Arrastra una referencia a <span class="ButtonText">BroadcastList</span> desde <span class="ButtonText">My Definitions</span>. Colócalo como valor de argumento para <span class="ButtonText">StoreValue</span>.
                </li>
                <li>Coloca el bloque <span class="ButtonText">StoreValue</span> justo por debajo de los bloques que añaden un elemento a <span class="ButtonText">BroadcastList</span>.
                </li>
              </ol>
              <p>
                La parte de abajo del controlador de evento <span class="ButtonText">Texting1.MessageReceived</span> modificado debe aparecer como el siguiente:
              </p>
              <div class="imagecontainer">
                <img alt="" height="460" src="BroadcasterHubAssets/storeBroadcastList.png" width="747">
              </div>
              <h2>
                Como trabajan los bloques
              </h2>
              <p>
                <span class="ButtonText">TinyDB1.StoreValue</span> alacena los datos de <span class="ButtonText">BroadcastList</span> en una base de datos con una etiqueta que puedes usar posteriormente para recuperar los datos para tu aplicación. En este caso, la etiqueta (tag) es el texto, "broadcastList", y el valor es la lista actual <span class="ButtonText">BroadcastList</span>.<br>
              </p>
              <h2>
                Cargando BroadcastList desde una Base de datos
              </h2>
              <p>
                Ahora añade los bloque para que se cargue la lista cada vez que la aplicación se inicie. Cuando la aplicación arranca, el evento <span class="ButtonText">Screen1.Initialize</span> es iniciado, por lo que tus bloques van a ir en ese controlador de evento. Llamarás a <span class="ButtonText">TinyDB.GetValue</span>, usando la misma etiqueta que usaste para almacenar la lista ("broadcastList"). Comprueba si el valor devuelto es una lista, porque no lo será si no hay ningún dato aún en la lista.
              </p>
              <p>
                Los bloques deben quedar como a continuación:
              </p>
              <div class="imagecontainer">
                <img alt="" height="242" src="BroadcasterHubAssets/getValue.png" width="540">
              </div>
              <h2>
                Como trabajan los bloques
              </h2>
              <p>
                Los bloques primero definen una variable, <span class="ButtonText">valueFromDB</span>, la cual es usada para almacenar temporalmente los datos devueltos por la base de datos. Cuando la apicación se inicia, el evento <span class="ButtonText">Screen1.Initialize</span> es activado. Se llama a <span class="ButtonText">TinyDB.GetValue</span>, y los datos de la base de datos se colocan en <span class="ButtonText">valueFromDB</span>.
              </p>
              <p>
                Entonces se comprueba la variable para ver si es una lista. Si no lo es, eso significa que no hay datos para la etiqueta "broadcastList" en la base de datos, y se devuelve un texto vacío. Esto ocurre la primera vez  que un usuario abre la aplicación.
              </p>
              <p>
                Si <span class="ButtonText">valueFromDB</span> es una lista, la lista se coloca en la variable <span class="ButtonText">BroadcastList</span> y la lista es mostrada.
              </p>
              <blockquote class="testing">
                <strong>Prueba este comportamiento.</strong> Elige <span class="ButtonText">Restart App</span> lo cual activará el evento <span class="ButtonText">Screen.Initialize</span>. ¿Aparecen los números registrados anteriormente?
              </blockquote>
              <h2>
                Mostrar BroadcastList con cada número en lineas separadas
              </h2>
              <p>
                Crea un procedimiento <span class="ButtonText">displayBroadcastList</span>, el cual muestre la lista con cada número en una linea separada. Asegúrate y llama al procedimiento desde debajo del bloque  <span class="ButtonText">add items to list</span> para que aparezca la lista actualizada.
              </p>
              <p>
                Para obtener ayuda para mostrar la lista en lineas separadas, mira <a href="../../../learn/reference/other/displaylist.html">Displaying a List</a>
              </p>
              <p>
                Necesitarás los siguientes bloques:
              </p>
              <div class="advtutorial">
                <table>
                  <tbody>
                    <tr>
                      <td class="tbl-header">
                        Tipo de bloque
                      </td>
                      <td class="tbl-header">
                        Cajón
                      </td>
                      <td class="tbl-header">
                        Propósito
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">procedure</span> ("displayBroadcastList")                      
                      </td>
                      <td>                        
                        Definitions                      
                      </td>
                      <td>
                        Crea el procedimiento
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">set BroadcastListLabel.Text to</span>
                      </td>
                      <td>                        
                        BroadcastListLabel                      
                      </td>
                      <td>
                        Muestra la lista aquí
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">text</span> ("Phone Numbers...")                      
                      </td>
                      <td>                        
                        Text                      
                      </td>
                      <td>
                        El encabezado para la lista
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">foreach</span>
                      </td>
                      <td>                        
                        Control                      
                      </td>
                      <td>
                        Se repite para los números
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">name pnumber</span>
                      </td>
                      <td>                        
                        in the foreach                      
                      </td>
                      <td>
                        Nombra como "pnumber' la variable foreach. Es el elemento actual de <span class="ButtonText">foreach</span>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">BroadcastList</span>
                      </td>
                      <td>                        
                        My Definitions                      
                      </td>
                      <td>
                        Se coloca en la ranura <span class="ButtonText">in list</span> de <span class="ButtonText">foreach</span>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">set BroadcastListLabel.Text to</span>
                      </td>
                      <td>                        
                        BroadcastListLabel                      
                      </td>
                      <td>
                        Se modifica con cada uno de los números
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">make text</span>
                      </td>
                      <td>                        
                        Text                      
                      </td>
                      <td>
                        Crea un objeto de texto desde varias piezas
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">BroadcastListLabel.Text</span>
                      </td>
                      <td>                        
                        BroadcastListLabel                      
                      </td>
                      <td>
                        Se añade a la etiqueta en cada repetición de <span class="ButtonText">foreach</span>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">text</span> ("\n")                      
                      </td>
                      <td>                        
                        Text                      
                      </td>
                      <td>
                        El caracter de nueva linea, para que el siguiente número aparezca en una nueva linea
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">value pnumber</span>
                      </td>
                      <td>                        
                        My Definitions                      
                      </td>
                      <td>
                        El número actual de la lista
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <p>
                El procedimiento <span class="ButtonText">displayBroadcastList</span> debe aparecer así:
              </p>
              <div class="imagecontainer">
                <img alt="" height="306" src="BroadcasterHubAssets/displayBroadcastList.png" width="623">
              </div>
              <h2>
                Como trabajan los bloques
              </h2>
              <p>
                El bloque <span class="ButtonText">foreach</span> de <span class="ButtonText">displayBroadcastList</span> sucesivamente añade un número de teléfono al final de la etiqueta, colocando un caracter nueva linea entre cada elemento.
              </p>
              <p>
                Por supuesto, este procedimiento no hará nada hasta que sea llamado: debes añadir dos llamadas al procedimiento: una para el controlador de evento <span class="ButtonText">Texting1.MessageReceived</span>, y otra para el controlador de evento <span class="ButtonText">Screen1.Initialize</span>. El bloque <span class="ButtonText">call displayBroadcastList</span> puede encontrarse en My Definitions, y debe remplazar los bloques que ajustan <span class="ButtonText">BroadcastListLabel.Text</span> directamente a la lista. Puedes ver como deben quedar estas llamadas a <span class="ButtonText">displayBroadcastList</span> en la captura de pantalla de la versión final mas abajo.
              </p>
              <blockquote class="testing">
                <strong>Prueba este comportamiento.</strong> Prueba a añadir algunos números de teléfono mas a la lista. ¿Aparecen los números de teléfono registrados en lineas separadas?
              </blockquote>
              <h2>
                Versión final de Broadcast Hub
              </h2>
              <div class="imagecontainer">
                <img alt="" height="663" src="BroadcasterHubAssets/finalversion.png" width="900">
              </div>
              <h2>
                Variaciones
              </h2>
              <p>
                Una vez que tengas la aplicación Broadcast Hub funcionando, puede que quieras explorar algunas variaciones. Por ejemplo.
              </p>
              <ul>
                <li>Permitir a los teléfonos cliente borrarse de la lista enviando el texto "quitabc" a la aplicación.
                </li>
                <li>Permitir al administrador del centro de comunicaciones (el usuario de tu aplicación) añadir y quitar números de la lista de difusión.
                </li>
                <li>Permitir al administrador especificar números que no serán admitidos en la lista.<br>
                </li>
              </ul>
              <h2>
                Revision
              </h2>Estas son algunas de las ideas examinadas en este tutorial:<br>
              <ul>
                <li>Las aplicaciones pueden reaccionar a eventos, como un texto recibido, que no son iniciados por el usuario de la aplicación.
                </li>
                <li>Los bloques <span class="ButtonText">ifelse</span> y <span class="ButtonText">foreach</span> anidados pueden ser usados para crear comportamientos complejos.
                </li>
                <li>El bloque <span class="ButtonText">make text</span> puede usarse para construir un texto a partir de varias piezas.
                </li>
                <li>
                  <span class="ButtonText">TinyDB</span> puede usarse para almacenar y recuperar datos desde una base de datos. Un esquema general es llamar a <span class="ButtonText">StoreValue</span> para actualizar la base de datos cuando cambian los datos, y llamar a <span class="ButtonText">GetValue</span> para recuperar los datos cuando la aplicación se inicia.<br>
                </li>
              </ul>
              <h2>
                Escanea la aplicación de ejemplo para tu teléfono
              </h2>
              <p>
                Escanea el siguiente código Qr con tu teléfono para instalar y ejecutar la aplicación de ejemplo.
              </p>
              <div class="imagecontainer">
                <img alt="" src="BroadcasterHubAssets/broadcastbarcode.png">
              </div>
              <h2>
                Descarga el código fuente
              </h2>Si te ha gustado trabajar con este ejemplo en App Inventor, descarga el <a href="BroadcasterHubAssets/broadcastHub.zip">código fuente</a> a tu computadora, despues abre App Inventor, ve a la página <span class="ButtonText">My Projects</span>, y elige <span class="ButtonText">More Actions | Upload Source</span>.
            </div>
            <blockquote class="notice">
              Google agradece al <a href="http://www.appinventor.org/">Profesor David Wolber</a>, Profesor de Ciencias de la Computación en la Universidad de San Francisco, el desarrollo de este tutorial.
            </blockquote>
          </div>
        </div>
      </div>
      <div class="footer">
        <div class="footer-legal">
          <p>
            <a href="http://creativecommons.org/licenses/by-nc/3.0/es/" rel="license"><img alt="Creative Commons License" class="c4" src="http://i.creativecommons.org/l/by-nc/3.0/88x31.png"></a><br>
            Este trabajo está bajo una licencia <a href="http://creativecommons.org/licenses/by-nc/3.0/es/" rel="license">Creative Commons Attribution-NonCommercial 3.0 Unported License</a>.
          </p>
          <p>
            El trabajo original de Google se ha modificado<br>
              El trabajo modificado fue traducido del Inglés al Español<br>
            <a href="../../../about/index.html">Acerca de</a> | <a href="../../../about/privacy.html">Privacidad</a> | <a href="../../../about/termsofservice.html">Condiciones</a>
          </p>
        </div>
        <div class="footer-lastupdate">
          <script type="text/javascript">
if (document.lastModified != '') {
                var m = "Page last updated: " + document.lastModified;
                var p = m.length-8;
                document.writeln("<center>");
                document.write(m.substring(p, 0));
                document.writeln("<\/center>");
              }
          </script>
        </div>
      </div>
    </div>
  </body>
</html>


